<template>
	<view>
		<view class="zx_select" :style="{top:top+'px'}">
			<view class="nav-list">
				<view class="nav" v-for="(list,key) in set" @click="cn(key)"
				>
					<template v-if="list.type=='list'">
						<text :style="{color:result[list.key]==''?'':color}" v-if="result[list.key]==''||!showName">{{list.name}}</text>
						 <text v-else :style="{color:color}">{{result[list.key]}}</text>
						 <view  class="xiala" :style="{transform:key===curKey?'rotate(180deg)':''}">
						 		<u-icon  name="arrow-down" :color="result[list.key]==''?'':color"></u-icon> 
						 </view>
					</template>
					<template v-else-if="list.type=='city'">
						 <text v-if="result.province == 'all'" >全国</text>
						 <text v-else-if="result.province != ''&&result.city!=''" :style="{color:color}">{{result.city=='all'?result.province:result.city}}</text>
						 <text v-else>区域</text>
						 <view class="xiala" :style="{transform:key===curKey?'rotate(180deg)':''}">
						 		<u-icon  name="arrow-down" 
								:color="(result.province != 'all'&&result.province != ''&&result.city!=''&&result.province != 'all')?color:''"></u-icon> 
						 </view>
					</template>
					
					<template v-else-if="list.type=='distance'">
						<text v-if="result.distance == ''||result.distance == 'city'" >距离</text>
						<template v-else>
							<text v-if="result.distance == 'asc'" :style="{color:color}">离我最近</text>
							<text v-else="result.distance == 'desc'" :style="{color:color}">离我最远</text>
							
						</template>
						<view  class="xiala" :style="{transform:key===curKey?'rotate(180deg)':''}">
								<u-icon  name="arrow-down" :color="result.distance == ''||result.distance == 'city'?'':color"></u-icon> 
						</view>
					</template>
					
					<template v-else-if="list.type=='choose'">
						<text :style="{color:isCheck(list.list)?color:''}">{{list.name}}</text>
						<view class="xiala" :style="{transform:key===curKey?'rotate(180deg)':''}">
								<u-icon :color="isCheck(list.list)?color:''" name="arrow-down" ></u-icon> 
						</view>
					</template>
				
					<view class="hide-box " :style="{top:(top+40)+'px'}" v-if="key === curKey"
					 @click.native.stop="curKey = null">
						<view class="con fadeInDown animated;overflow: auto;" >
							<u-cell-group v-if="list.type=='list'" style="height: 40vh;overflow: auto;">
								<scroll-view scroll-y style="height: 40vh;overflow: auto;">
									<u-cell clickable :title="cell.name" v-for="cell in list.list" @click.native.stop="s(list.key,cell.value)">
										<view slot="right-icon">
											<u-icon v-if="result[list.key] == cell.value"  name="checkbox-mark" :color="color"></u-icon>
										</view>
									</u-cell>
								</scroll-view>
							</u-cell-group>
							<view v-else-if="list.type=='city'" style="display: flex;flex-direction: row;">
								<scroll-view scroll-y class="city-box" style="">
									<view class="p-list" :style="{background:result.province == city.value?'#fff':''}" v-for="city in cityList" @click.stop="sc(city,'province')">{{city.name}}</view>
								</scroll-view>
								<scroll-view scroll-y class="city-son" v-if="sonCity.length">
									<u-cell-group>
										<u-cell :title="e.name" :isLink="true" v-for="e in sonCity" @click.native.stop="sc(e,'city')">
											<view slot="right-icon" >
												<u-icon v-if="result.city == e.value"  name="checkbox-mark" :color="color"></u-icon>
											</view>
										</u-cell>
									</u-cell-group>
								</scroll-view>
							</view>
							<u-cell-group v-else-if="list.type=='distance'">
								<view @click.stop="result.distance = '';save()">
									<u-cell clickable title="默认"  >
										<view slot="right-icon">
											<u-icon v-if="result.distance == ''"  name="checkbox-mark" :color="color"></u-icon>
										</view>
									</u-cell>
								</view>
								
									<view  @click.stop="result.distance = 'asc';save()">
										<u-cell clickable title="离我最近" >
											<view slot="right-icon">
												<u-icon v-if="result.distance == 'asc'"  name="checkbox-mark" :color="color"></u-icon>
											</view>
										</u-cell>
									</view>
								
								<view  @click.stop="result.distance = 'desc';save()">
									<u-cell clickable title="离我最远" >
										<view slot="right-icon">
											<u-icon v-if="result.distance == 'desc'"  name="checkbox-mark" :color="color"></u-icon>
										</view>
									</u-cell>
								</view>
									
							</u-cell-group>
							
							<scroll-view scroll-y v-else-if="list.type=='choose'&&list.list" @click.stop=""
							style="overflow-y: auto;height: 40vh;border-top: 1px #eee solid;position: relative;">
								<view v-for="(son,sk) in list.list" style="margin: 10px;">
									<view class="son-title">{{son.name}}</view>
									<view style="display: flex;flex-direction: row;flex-wrap: wrap;" 
									v-if="is_Array(result[son.key])&&son.key !='start_daterange'">
										<view class="son" v-if="l.value.length"
										:style="{background:inArray(result[son.key],l.value)?color:'',color:inArray(result[son.key],l.value)?'#ffffff':'' }" v-for="l in son.list"
										 @click.stop="s(son.key,l.value,false)">{{l.name}}</view>
										
									</view>
									<view style="margin: 10px 0;position: relative;" @click="dj()"
									 v-else-if="son.key =='start_daterange'">
										<view style="display: flex;flex-direction: row;;justify-content: space-between;border-radius: 4px;
										border: #eee 1px solid;height: 36px;align-items: center;">
										<view style="margin-left: 5px;;">
											<u-icon name="calendar" size="18" color="#666"></u-icon>
										</view>
											<view style="color: #666;font-size: 14px;">
												<view style="display: flex;flex-direction: row;justify-content: center;" v-if="!result['start_daterange'].length">
													<view>起始日期</view> <view style="text-align: center;width: 100px;">至</view> <view>结束日期</view>
												</view>
												<view style="display: flex;flex-direction: row;justify-content: center;" v-else>
													<view>{{$u.timeFormat(result['start_daterange'][0], 'yyyy-mm-dd')}}</view>
													 <view style="text-align: center;width: 50px;">至</view>
													  <view>{{$u.timeFormat(result['start_daterange'][1], 'yyyy-mm-dd')}}</view>
												</view>
											</view>
											<view style="margin-right: 5px;"  >
											<view @click.stop="closeRq" v-if="result['start_daterange'].length">
												<u-icon name="close-circle-fill" size="18" color="#666"
												
												 ></u-icon>
											</view>
												
											</view>
										</view>
									</view>
									<view style="display: flex;flex-direction: row;flex-wrap: wrap;" v-else>
										<view class="son" :style="{background:result[son.key] == l.value?color:'',color:result[son.key] == l.value?'#ffffff':'' }" v-for="l in son.list"
										 @click.stop="s(son.key,l.value,false)">{{l.name}}</view>
									</view>

								</view>
		
								<view class="btn-box" style="margin: 10px;">
									<text class="btn-" :style="'background-color: #eee;color:#666'" @click.stop="quxiao(list.list)">取消选择</text>
										<text class="btn-" :style="'background-color:'+color" @click="save()">确认选择</text>
								</view>
							</scroll-view>
						
						</view>
					</view>
				</view>

				<slot name="next">
				
				</slot>
			</view>
			<view style="width: 1px;height: 1px;position: fixed;;left: -300px;top: -301px;z-index: 99999;" v-if="result.start_daterange">
				<uni-datetime-picker  ref="mobile"
				@change="up"
						v-model="result['start_daterange']"
						type="daterange"
						rangeSeparator="至"
					></uni-datetime-picker>
			</view>

		</view>
	 <!-- <view style="height: 40px;"></view> -->
	</view>

</template>

<script>
	export default {
		name:"moxi-choose",
		data() {
			return {
				color:"",
				curKey:null,
				cityList:[],
				sonCity:[],
				show:false,
				range:[]
			};
		},computed:{
            result: {
                get:function() {
                    return this.value;
                },
                set:function (v){
                    this.$emit("change", v);
                }
            },
			set: {
			    get:function() {
			        return this.field; 
			    },
			
			}
        },
		model: {
			prop: 'value',
			event: 'change'
		}
		,props:{
			 field:{
				type:Array,
			 	default(){
					return [
						
					]
				},
				
			 },
			 value:{
				 type:Object,
				 default(){
				 	return {}
				 	}
			 },
			 showName:{
				 type:Boolean,
				 default(){
					return false
					}
			 },
			 top:{
				 type:Number,
				 default(){
					return 50
					}
			 }
		},created() {
			this.color = this.$appData.data.app_color;
			let hasCity = false;
			for(let k in this.set){
				if(this.set[k].type=='list'){
					// if(!this.set[k].list){
					// 	this.set[k].list = [];
					// }
					// this.set[k].list.unshift({
					// 	name:"全部",
					// 	value:""
					// })
				}else if(this.set[k].type=='city'){
					hasCity = true;
				}else if(this.set[k].type=='distance'){
					let self = this
					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							self.result.ln = res.longitude;
							self.result.la = res.latitude;
							// self.save()
						},fail(e) {
							console.log('获取位置出错：',e);
						}
					});
				}
			}
			if(hasCity&&!this.cityList.length){
				this.cityList.push({
						name:"全国",
						value:"all",
						list:[
							{
								name:"全国",
								value:"all"
							}
						]
					})
					let self = this;
					this.getAddress((data)=>{
						let cur = {};
						for(let k in data){
							cur = {
								name:data[k].name,
								value:data[k].name,
								list:[
									{
										name:"全部",
										value:"all"
									}]
							};
							for(let s in data[k].list){
								cur.list.push({
									name:data[k].list[s].name,
									value:data[k].list[s].name,
								})
							}
							self.cityList.push(cur)
						}
					})
			}
			this.$forceUpdate()
		},
		methods: {
			cn(key){
				this.curKey===key?this.curKey = null:this.curKey = key
			},
			up(e){
			
				this.$forceUpdate()
			},
			closeRq(){
				this.$refs.mobile.clear()
			},
			dj(){
				this.$refs.mobile.show()
			},
			inArray(arr,value){
				for(let k in arr){
					if(arr[k] == value){
						return true;
					}
				}
				return false;
			},
			is_Array(item){
				return Array.isArray(item);
			},
			isCheck(list){
				for(let k in list){
					if(this.result[list[k].key].length){
						return true;
					}
				}
				return false;
			},
			quxiao(list){
				for(let k in list){
					if(Array.isArray(this.result[list[k].key])){
						this.result[list[k].key] = [];
					}else{
						this.result[list[k].key] = '';
					}
				}
				this.save()
			},
			sc(list,type){
				console.log(type);
				this.result[type] = list.value;
				if(type=='province'&&list.list){
					this.sonCity = list.list
					this.result.city = '';
					
				}else{
					this.curKey = null;
					this.save()
				}
				
			
			},
			s(key,value,save = true){
				if(Array.isArray(this.result[key])){
					let has = false;
					for(let k in this.result[key]){
						if(this.result[key][k] == value){
							this.result[key].splice(k,1);
							has = true;
							break
						}
					}
					if(!has){
						this.result[key].push(value)
					}
				}else{
					this.result[key] = value;
				}
				this.$forceUpdate()
				if(save===true||save===undefined){
					this.save();
				}
			},
			save(){
				
				this.curKey = null;
				this.$emit("change", this.result);
			}
		}
	}
</script>

<style lang="scss">
	.btn-box{

		display: flex;flex-direction: row;border-top: 1px #ccc solid;padding: 10px 0;
		position: sticky;bottom: 0;justify-content: space-between;background-color: #fff;color: #666;font-size: 13px;
	}
	.btn-{
		width: 45%;text-align: center;border-radius: 25px;padding: 10px 0;background-color: red;color: #fff;
	}
	.son-title{
		padding: 10px 0;border-bottom: 1px #eee dashed;font-size: 14px;
	}
	.son{
		padding: 6px 15px;background: #e4e6ee;margin: 10px 10px 10px 0;border-radius: 25px;font-size: 12px;color: #333;
	}
	// .zx_select{position: fixed;left: 0;width: 100%;background-color: #fff;z-index: 12;}
	.hide-box .animated {
	animation-duration: 0.3s;
	}
	.xiala{margin-left: 6px;transition: all 0.4s;display: inline-block;margin-top: 2px;}
	.nav-list{
		display: flex;flex-direction: row;justify-content: space-around;position: relative;
	}
	.hide-box{position: fixed;left: 0;width: 100%;height: 100vh;
	background:rgba(0,0,0,0.5) ;z-index: 10;display: flex;flex-direction: column;}
	.nav-list .nav{padding: 10px 0;font-size: 15px;display: flex;flex-direction: row;}
	.con{background-color: #fff;height: 40vh;z-index: 9999}

.city-box{width: 120px;background-color: #eee;overflow: auto;display: flex;flex-direction: column;
height: 40vh;}
.p-list{padding: 10px;}
.city-son{background: #fff;display: flex;flex-direction: column;margin:0 10px;height: 40vh;flex: 1;}
</style>
